<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
import { get } from 'lodash-es'
import { switchTab } from '@uni-helper/uni-promises'
import CustomerService from '@/components/CustomerService.vue'

const content = ref('')
const title = ref('')
const signVoucher = ref('')
const eventChannel = ref()
const type = ref('success')
const color = ref('#04CD5A')

function onGoHome() {
    switchTab({
        url: '/pages/clock/clock',
    })
}

onLoad((options) => {
    title.value = options?.title
    content.value = options?.content
    signVoucher.value = options?.signVoucher
    type.value = options?.type || 'success'
    color.value = options?.color || '#04CD5A'

    const instance = getCurrentInstance()
    eventChannel.value = get(instance, 'proxy.getOpenerEventChannel', new Function()).call(instance?.proxy)
    eventChannel.value.on('channelData', (data: AnyObject) => {
        title.value = data?.title
        content.value = data?.content
        signVoucher.value = data?.signVoucher
        type.value = data?.type || 'success'
        color.value = data?.color || '#04CD5A'
    })
})
</script>

<template>
    <NavbarContainer title="提交成功">
        <view class="flex flex-col items-center justify-center">
            <view class="h-full w-full flex-1">
                <view class="mb-30rpx w-full bg-orange bg-op-10 px-20rpx py-30rpx text-center text-base text-orange">
                    {{ content }}
                </view>
                <view class="flex flex-col items-center justify-center">
                    <icon :type="type" :color="color" :size="88" />
                    <view class="py-60rpx text-xl">{{ title }}</view>
                </view>
                <view class="box-border px-30rpx">
                    <view class="relative h-210rpx w-full">
                        <image class="absolute left-0 top-0 h-full w-full" src="../../assets/image/bg-shield.png" />
                        <view
                            class="absolute left-0 top-0 z-10 box-border h-full w-full flex justify-between px-30rpx py-50rpx">
                            <view>
                                <view class="mt-16rpx text-lg text-gray font-bold">您有一份保障待领取</view>
                                <view
                                    class="mt-30rpx inline-block border-1 border-green rounded-full border-solid px-16rpx py-10rpx text-20rpx text-green">
                                    免费领取
                                </view>
                            </view>
                            <image class="h-121rpx w-128rpx" src="../../assets/image/shield.png" />
                        </view>
                    </view>
                </view>
                <image v-if="signVoucher" class="mt-20rpx w-full" mode="aspectFit" :src="signVoucher" />
            </view>
        </view>
        <template #button>
            <view class="box-border w-full flex-shrink-0 px-30rpx pb-safe-30rpx">
                <view class="mb-30rpx h-94rpx rounded-full bg-orange text-center text-white lh-94rpx" @click="onGoHome">
                    返回
                </view>
                <CustomerService />
            </view>
        </template>
    </NavbarContainer>
</template>

<style scoped></style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "提交成功"
    }
}
</route>
